<template>
    <div class="app-container collect">
        <span class="title">消息中心</span>
        <div class="content">
            <!-- <el-button type="primary" class="clear-btn" round @click="clearAll">清空</el-button> -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="机构消息" name="first">
                    <organization></organization>
                </el-tab-pane>
                <el-tab-pane label="系统消息" name="second">
                    <system></system>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import organization from "@/components/message/organization";
import system from "@/components/message/system";
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  components: {
    organization,
    system
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    clearAll() {
      this.$store.commit("SET_ISMESSAGE", true);
    }
  }
};
</script>
<style lang="less" scoped>
.collect {
  height: 100%;
  width: 100%;
  .content {
    width: 100%;
    position: relative;
    .clear-btn {
      background-color: #15c798;
      z-index: 10;
      position: absolute;
      right: 0px;
      top: 0px;
      height: 35px;
      line-height: 35px;
      font-size: 16px;
      padding: 0px 33px;
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      background-color: #15c798;
    }
    .el-button--primary {
      border-color: transparent;
    }
  }
  .title {
    font-size: 24px;
    margin-bottom: 16px;
    display: block;
  }
}
</style>
<style lang="less">
.custom-dz{
  .collect .content .el-tabs__item.is-active{
    color: #e93926
  }
}
.collect {
  .content {
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-tabs__item {
      font-size: 18px;
    }
    .el-tabs__item:hover {
      // color: #15c798;
    }
    .el-tabs__item.is-active {
      // color: #15c798;
    }
    .el-tabs__active-bar {
      // background-color: #15c798;
    }
    .el-tabs__nav {
      padding-bottom: 5px;
    }
  }
}
</style>



